<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>WebView</title>

    <style type="text/css">
        body{
            background: #cbcc1a;
        }


    </style>

</head>

<body>
<h2>WebView</h2>

<div>
    <span>请输入要传递的值：</span><input type="text" id="input">
</div>
<div>
    <button type="button" id="btn">addJavascriptInterface调用Android方法</button>
    <button type="button" id="btn2">shouldOverrideUrlLoading调用Android方法</button>
    <button type="button" id="btn3">prompt调用Android方法</button>
</div>

<script type="text/javascript">
    var btnEle = document.getElementById("btn");
    var inputEle = document.getElementById("input");
    btnEle.addEventListener("click" , function(){
        var str = inputEle.value;
        if (window.launcher){ // 判断 launcher 对象是否存在
            // JS 调用 Android 的方法1：通过原生APP暴露的对象，调用原生接口
            launcher.callAndroid(str);
        }else{
            alert("launcher not found!");
        }
    });

    var callJS = function(str){
        inputEle.value = str;
    }

// JS 调用 Android 的方法2：通过overrideurl，触发原生应用中的WebViewClient对象的shouldOverrideUrlLoading方法
    var btnEle2 = document.getElementById("btn2");
    btnEle2.addEventListener("click", function(){
        // 约定的 url 协议为：js://webview?arg1=111&arg2=222
        document.location = "js://webview?arg1="+inputEle.value+"&arg2=222"; 
    });

// JS 调用 Android 的方法3：通过alert、promt、confirm等触发WebChromeClient 的onJsAlert、onJsPrompt、onJsConfirm函数，让原生App拦截信息，并执行应用逻辑（下面显示的是通过prompt）
    var btnEle3 = document.getElementById("btn3");
    btnEle3.addEventListener("click", function(){
        // 调用 prompt()
        var result=prompt("js://prompt?arg1="+inputEle.value+"&arg2=222");

    });
    
</script>
</body>
</html>